<template>
    <div id="" class="paT55">
        <div class="map">
            <cesium-view @ready="ready"></cesium-view>
        </div>
        <div style="display: flex;position: absolute;top: 205px;right: 0;z-index: 100">
            <div class="layerBtn" @click="layerSelect = !layerSelect">
                <img src="../../../assets/img/geography/geographic09.png" style="width: 20px;height: 20px;padding: 5px"/>
                <p style="text-align: center;line-height: 25px;font-size: 16px;color: white">图层</p>
                <i :class="layerSelect === false?'el-icon-d-arrow-left':'el-icon-d-arrow-right'" style="margin-left: 8px;color: white"></i>
            </div>
            <!--右边图层分区-->
            <div v-show="layerSelect" class="layertree scroll">
                <el-scrollbar class="page-component_scroll" style="color: white">
                    <el-tree
                            ref="mapLayerTree"
                            :data="mapLayerSource"
                            show-checkbox
                            check-on-click-node
                            node-key="id"
                            :props="{id: 'id', children: 'children',label: 'name'}"
                            :default-expand-all="true"
                            :default-checked-keys="visibleLayerIds"
                            @check-change="treeLoadMapLayer">
               <span class="custom-tree-node"  slot-scope="{ node, data }">
                <span>{{ data.name }}</span>
                <span>
                <span v-show="typeof(data.categoryId) !== 'undefined'" style="padding-right: 5px">
                  <i class="el-icon-upload2" @click.stop="() => treeClickLayerTop(node, data)" title="置顶"></i>
                </span>
                </span>
              </span>
                    </el-tree>
                </el-scrollbar>
            </div>
            <!--右边图层分区结束-->
        </div>
        <Dialog title="树种详情" :is-show-dialog="this.isShow3dDialog" class="dialogWap" @close="close3d">
            <div slot="content" class="dialog_3dWrap">
                <div class="left_3d" id="3dContainer"></div>
                <div class="right_info">
                    <div class="seeDialogTitle">{{treeData && treeData.germplasmName || '暂无信息'}}</div>
                    <div class="childTable">
                        <el-tabs v-model="selecteName" @tab-click="handleClick">
                            <el-tab-pane label="种质资源信息" name="resources">
                                <ul>
                                    <li class="tableItem">
                                        <div class="itemList">资源流水号:</div>
                                        <div class="itemList">{{treeData && treeData.serialNum}}</div>
                                    </li>
                                    <li class="tableItem">
                                        <div class="itemList">资源编号:</div>
                                        <div class="itemList">{{treeData && treeData.resourceNum}}</div>
                                    </li>
                                    <li class="tableItem">
                                        <div class="itemList">种质名称:</div>
                                        <div class="itemList">{{treeData && treeData.germplasmName}}</div>
                                    </li>
                                    <li class="tableItem">
                                        <div class="itemList">种质外文名:</div>
                                        <div class="itemList">
                                            <el-tooltip class="item" effect="dark" :content="treeData && treeData.germplasmFlName" placement="top">
                                                <div class="textOverflow">{{treeData && treeData.germplasmFlName}}</div>
                                            </el-tooltip>
                                        </div>
                                    </li>
                                    <li class="tableItem">
                                        <div class="itemList">种:</div>
                                        <div class="itemList">{{treeData && treeData.specificName}}</div>
                                    </li>
                                    <li class="tableItem">
                                        <div class="itemList">拉丁名:</div>
                                        <div class="itemList">
                                            <el-tooltip class="item" effect="dark" :content="treeData && treeData.latinName" placement="top">
                                                <div class="textOverflow">{{treeData && treeData.latinName}}</div>
                                            </el-tooltip>
                                        </div>
                                    </li>
                                    <li class="tableItem">
                                        <div class="itemList">科名:</div>
                                        <div class="itemList">{{treeData && treeData.familyName}}</div>
                                    </li>
                                    <li class="tableItem">
                                        <div class="itemList">属名:</div>
                                        <div class="itemList">{{treeData && treeData.genericName}}</div>
                                    </li>
                                    <li class="tableItem">
                                        <div class="itemList">原产地(县):</div>
                                        <div class="itemList">
                                            <el-tooltip class="item" effect="dark" :content="treeData && treeData.originCounty" placement="top">
                                                <div class="textOverflow">{{treeData && treeData.originCounty}}</div>
                                            </el-tooltip>
                                        </div>
                                    </li>
                                    <li class="tableItem">
                                        <div class="itemList">
                                            <el-tooltip class="item" effect="dark" content="原产地(乡村、林场):" placement="top">
                                                <div class="textOverflow">原产地(乡村、林场):</div>
                                            </el-tooltip>
                                        </div>
                                        <div class="itemList">
                                            <el-tooltip class="item" effect="dark" :content="treeData && treeData.originDistrict" placement="top">
                                                <div class="textOverflow">{{treeData && treeData.originDistrict}}</div>
                                            </el-tooltip>
                                        </div>
                                    </li>
                                    <li class="tableItem">
                                        <div class="itemList">原产地小地名:</div>
                                        <div class="itemList">
                                            <el-tooltip class="item" effect="dark" :content="treeData && treeData.smallPlaces" placement="top">
                                                <div class="textOverflow">{{treeData && treeData.smallPlaces}}</div>
                                            </el-tooltip>
                                        </div>
                                    </li>
                                    <li class="tableItem">
                                        <div class="itemList">采集者标注:</div>
                                        <div class="itemList">{{treeData && treeData.pickerLabel}}</div>
                                    </li>
                                    <li class="tableItem">
                                        <div class="itemList">国家:</div>
                                        <div class="itemList">{{treeData && treeData.state}}</div>
                                    </li>
                                    <li class="tableItem">
                                        <div class="itemList">省:</div>
                                        <div class="itemList">{{treeData && treeData.province}}</div>
                                    </li>
                                    <li class="tableItem w100">
                                        <div class="itemList">来源地:</div>
                                        <div class="itemList">{{treeData && treeData.provenance}}</div>
                                    </li>
                                </ul>
                            </el-tab-pane>
                            <el-tab-pane label="分类检索信息" name="classify">
                                <ul>
                                    <li class="tableItem">
                                        <div class="itemList">归类编码:</div>
                                        <div class="itemList">{{treeData && treeData.classifyCode}}</div>
                                    </li>
                                    <li class="tableItem">
                                        <div class="itemList">资源类型:</div>
                                        <div class="itemList">{{treeData && treeData.resourceType}}</div>
                                    </li>
                                    <li class="tableItem">
                                        <div class="itemList">主要特征:</div>
                                        <div class="itemList">{{treeData && treeData.keyProperty}}</div>
                                    </li>
                                    <li class="tableItem">
                                        <div class="itemList">主要用途:</div>
                                        <div class="itemList">{{treeData && treeData.mainUses}}</div>
                                    </li>
                                    <li class="tableItem w100">
                                        <div class="itemList">气候带:</div>
                                        <div class="itemList">{{treeData && treeData.climaticZone}}</div>
                                    </li>
                                </ul>
                            </el-tab-pane>
                            <el-tab-pane label="基本描述信息" name="basic">
                                <ul>
                                    <li class="tableItem">
                                        <div class="itemList">生长习性:</div>
                                        <div class="itemList">{{treeData && treeData.growthHabit}}</div>
                                    </li>
                                    <li class="tableItem">
                                        <div class="itemList">特征特性:</div>
                                        <div class="itemList">{{treeData && treeData.feature}}</div>
                                    </li>
                                    <li class="tableItem">
                                        <div class="itemList">花期:</div>
                                        <div class="itemList">{{treeData && treeData.floweringPhase}}</div>
                                    </li>
                                    <li class="tableItem">
                                        <div class="itemList">果期:</div>
                                        <div class="itemList">{{treeData && treeData.fruiting}}</div>
                                    </li>
                                    <li class="tableItem">
                                        <div class="itemList">具体用途:</div>
                                        <div class="itemList">{{treeData && treeData.concretePurpose}}</div>
                                    </li>
                                    <li class="tableItem">
                                        <div class="itemList">海拔:</div>
                                        <div class="itemList">{{treeData && treeData.alt}}</div>
                                    </li>
                                    <li class="tableItem">
                                        <div class="itemList">经度:</div>
                                        <div class="itemList">{{treeData && treeData.lon}}</div>
                                    </li>
                                    <li class="tableItem">
                                        <div class="itemList">纬度:</div>
                                        <div class="itemList">{{treeData && treeData.lat}}</div>
                                    </li>
                                    <li class="tableItem">
                                        <div class="itemList">繁殖方式:</div>
                                        <div class="itemList">{{treeData && treeData.modesReproduction}}</div>
                                    </li>
                                    <li class="tableItem">
                                        <div class="itemList">选育单位:</div>
                                        <div class="itemList">{{treeData && treeData.breedingUnits}}</div>
                                    </li>
                                    <li class="tableItem">
                                        <div class="itemList">选育年份:</div>
                                        <div class="itemList">{{treeData && treeData.breedingYear}}</div>
                                    </li>
                                    <li class="tableItem">
                                        <div class="itemList">土壤类型:</div>
                                        <div class="itemList">{{treeData && treeData.agrotype}}</div>
                                    </li>
                                    <li class="tableItem">
                                        <div class="itemList">生态环境:</div>
                                        <div class="itemList">{{treeData && treeData.environment}}</div>
                                    </li>
                                    <li class="tableItem">
                                        <div class="itemList">年均温度:</div>
                                        <div class="itemList">{{treeData && treeData.temperature}}</div>
                                    </li>
                                    <li class="tableItem w100">
                                        <div class="itemList">年均降雨量:</div>
                                        <div class="itemList">{{treeData && treeData.rainfall}}</div>
                                    </li>
                                </ul>
                            </el-tab-pane>
                            <el-tab-pane label="其他描述信息" name="other">
                                <ul>
                                    <li class="tableItem">
                                        <div class="itemList">图像:</div>
                                        <div class="itemList">{{treeData && treeData.image}}</div>
                                    </li>
                                    <li class="tableItem">
                                        <div class="itemList">记录地址:</div>
                                        <div class="itemList">{{treeData && treeData.addressRecord}}</div>
                                    </li>
                                </ul>
                            </el-tab-pane>
                            <el-tab-pane label="保存单位信息" name="preserve">
                                <ul>
                                    <li class="tableItem">
                                        <div class="itemList">保存单位:</div>
                                        <div class="itemList">{{treeData && treeData.saveUnit}}</div>
                                    </li>
                                    <li class="tableItem">
                                        <div class="itemList">单位编号:</div>
                                        <div class="itemList">{{treeData && treeData.unitNum}}</div>
                                    </li>
                                    <li class="tableItem">
                                        <div class="itemList">库编号:</div>
                                        <div class="itemList">{{treeData && treeData.storeroomNum}}</div>
                                    </li>
                                    <li class="tableItem">
                                        <div class="itemList">引种号:</div>
                                        <div class="itemList">{{treeData && treeData.introduction}}</div>
                                    </li>
                                    <li class="tableItem">
                                        <div class="itemList">采集号:</div>
                                        <div class="itemList">{{treeData && treeData.acquisition}}</div>
                                    </li>
                                    <li class="tableItem">
                                        <div class="itemList">保存时间:</div>
                                        <div class="itemList">{{treeData && treeData.saveTime}}</div>
                                    </li>
                                </ul>
                            </el-tab-pane>
                            <el-tab-pane label="护照信息" name="passport">
                                <ul>
                                    <li class="tableItem">
                                        <div class="itemList">保存材料类型:</div>
                                        <div class="itemList">{{treeData && treeData.saveMaterialsType}}</div>
                                    </li>
                                    <li class="tableItem">
                                        <div class="itemList">保存方式:</div>
                                        <div class="itemList">{{treeData && treeData.saveMode}}</div>
                                    </li>
                                    <li class="tableItem w100">
                                        <div class="itemList">实物状态:</div>
                                        <div class="itemList">{{treeData && treeData.physicalState}}</div>
                                    </li>
                                </ul>
                            </el-tab-pane>
                            <el-tab-pane label="共享属性" name="share">
                                <ul>
                                    <li class="tableItem">
                                        <div class="itemList">共享方式:</div>
                                        <div class="itemList">{{treeData && treeData.sharingMode}}</div>
                                    </li>
                                    <li class="tableItem">
                                        <div class="itemList">获取途径:</div>
                                        <div class="itemList">{{treeData && treeData.approachAchieving}}</div>
                                    </li>
                                </ul>
                            </el-tab-pane>
                            <el-tab-pane label="联系人方式" name="contact">
                                <ul>
                                    <li class="tableItem">
                                        <div class="itemList">联系人:</div>
                                        <div class="itemList">{{treeData && treeData.contact}}</div>
                                    </li>
                                    <li class="tableItem">
                                        <div class="itemList">联系电话:</div>
                                        <div class="itemList">{{treeData && treeData.contactNum}}</div>
                                    </li>
                                    <li class="tableItem">
                                        <div class="itemList">邮箱:</div>
                                        <div class="itemList">{{treeData && treeData.email}}</div>
                                    </li>
                                    <li class="tableItem">
                                        <div class="itemList">采集地联系人:</div>
                                        <div class="itemList">{{treeData && treeData.millsContact}}</div>
                                    </li>
                                    <li class="tableItem w100">
                                        <div class="itemList">采集地联系人电话:</div>
                                        <div class="itemList">{{treeData && treeData.millsContactNum}}</div>
                                    </li>
                                </ul>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                </div>
            </div>
            <div slot="Footer" style="position: relative;z-index: 9999;text-align: center">
                <el-button class="dialogBtn" type="primary">确定</el-button>
                <el-button @click="isShow3dDialog = false" class="dialogBtn" type="primary" >取消</el-button>
            </div>
        </Dialog>
    </div>
</template>

<script>
import CesiumView from '../../../components/CesiumViewer'
import Corner from '../../../components/corner'
import speciesApi from '../../../api/speciesApi'
import Dialog from '../../../components/Dialog'

import geographicApi from '../../../api/geographicApi'

import 'cesium/Widgets/widgets.css'
let Cesium = require('cesium/Cesium')

export default {
  name: 'geoMap',
  components: {
    CesiumView, Corner, Dialog
  },
  data () {
    return {
      layerSelect: false,
      // 查看弹出框的选项卡数据
      selecteName: 'resources',
      isShow3dDialog: false,
      treeData: null,
      fileServerUrl: null,
      // 图层树
      mapLayerSource: [],
      // 默认显示图层ids
      visibleLayerIds: [],
      geoCesium: null,
      geoViewer: null
    }
  },
  created () {
    this.fileServerUrl = process.env.FILE_SERVER
  },
  mounted () {
    this.loadMapLayerSource()
  },
  methods: {
    ready (cesiumInstance) {
      this.cesiumInstance = cesiumInstance
      const {Cesium, viewer} = this.cesiumInstance
      this.geoCesium = Cesium
      this.geoViewer = viewer
      let scene = viewer.scene
      // let camera = scene.camera
      let handler = new Cesium.ScreenSpaceEventHandler(scene.canvas)
      let dom = this
      handler.setInputAction(function (e) {
        let primitive = scene.pick(e.position)
        if (primitive) {
          let entity = primitive.id
            // mapObj = this.geoViewer.entities.getById(layer.id)
          if (entity && entity.id) {
            console.log(entity.id)
            // dom.getSpeciesById(entity.id)
          }
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK)

      // this.add3dTiles(this.fileServerUrl + '/kz/Scene/KZmCesium.json')
      // this.add3dTiles(this.fileServerUrl + '/dm/Scene/DMmCesium.json')
      // this.add3DModel('34D13951-FE13-49FA-84BB-3C4D226DA2E1', this.fileServerUrl + '/model/xzs3_1.gltf')
    },
    add3dTiles (layerData) {
      let tileset = new Cesium.Cesium3DTileset({
        maximumScreenSpaceError: 2, // 最大的屏幕空间误差
        maximumNumberOfLoadedTiles: 1000, // 最大加载瓦片个数
        url: this.fileServerUrl + layerData.proUrl
      })
      let dom = this
      tileset.readyPromise.then(function (tileset) {
        let boundingSphere = tileset.boundingSphere
        let cartographic = dom.geoCesium.Cartographic.fromCartesian(boundingSphere.center)// 获取到倾斜数据中心点的经纬度坐标（弧度）
        let surface = dom.geoCesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0)// 倾斜数据中心点的笛卡尔坐标
        let positions = [dom.geoCesium.Cartographic.fromDegrees(cartographic.longitude, cartographic.latitude)]
        let promise = dom.geoCesium.sampleTerrainMostDetailed(dom.geoViewer.scene.terrainProvider, positions)// 其中terrainProvider是当前场景使用的高程Provider

        dom.geoCesium.when(promise, function (updatedPositions) {
          let terrainHeight = updatedPositions[0].height// 高程
          let offset = dom.geoCesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, terrainHeight)// 带高程的新笛卡尔坐标
          let translation = dom.geoCesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3())// 做差得到变换矩阵
          tileset.modelMatrix = dom.geoCesium.Matrix4.fromTranslation(translation)
        })
        tileset.id = layerData.id
        dom.geoViewer.scene.primitives.add(tileset)
        // 视角切换到3dtiles的位置
        dom.geoViewer.zoomTo(tileset, new Cesium.HeadingPitchRange(0.0, -0.5, tileset.boundingSphere.radius * 2.0))
        // view home 监听
        dom.geoViewer.homeButton.viewModel.command.beforeExecute.addEventListener(function (commandInfo) {
          dom.geoViewer.camera.flyToBoundingSphere(boundingSphere)
          commandInfo.cancel = true
        })
      }).otherwise(function (error) {
        console.log(error)
      })
    },
    add3DModel (featureData, parentEntity) {
      let lon = featureData.x
      let lat = featureData.y
      let hei = 20
      let position = this.geoCesium.Cartesian3.fromDegrees(lon, lat, hei)
      let hpr = new Cesium.HeadingPitchRoll(
        this.geoCesium.Math.toRadians(60),
        this.geoCesium.Math.toRadians(0),
        this.geoCesium.Math.toRadians(0)
      )
      let orientation = this.geoCesium.Transforms.headingPitchRollQuaternion(position, hpr)
      let entity = new Cesium.Entity({
        id: featureData.id, // 设置模型唯一标识，以方便后期获取模型对象来控制属性
        name: featureData.name,
        description: featureData,
        parent: parentEntity,
        position: position,
        orientation: orientation,
        maximumNumberOfLoadedTiles: 1000,
        model: {
          // uri: 'model3D/xzs3_1.gltf',
          uri: this.fileServerUrl + featureData.model,
          heightReference: this.geoCesium.HeightReference.RELATIVE_TO_GROUND, // 让模型在地形上紧贴
          scale: featureData.scale// 模型缩放比例
        }
      })
      this.geoViewer.entities.add(entity)
      let flyPoint = Cesium.Cartesian3.fromDegrees(lon, lat, 200)
      this.geoViewer.camera.flyTo({
        destination: flyPoint // 相机飞入点
      })
    },

    getSpeciesById (id) {
      let dom = this
      dom.treeData = null
      speciesApi.getSpeciesById(id).then(res => {
        if (res.data.messageType === '0') {
          dom.isShow3dDialog = true
          dom.treeData = res.data.result
          // dom节点渲染后
          this.$nextTick(() => {
            dom.load3dModelContainer()
          })
        }
      })
    },
    close3d (data) {
      this.isShow3dDialog = data
    },
    handleClick (tab, event) {
      // console.log(tab, event)
    },
    // 加载弹出层3容器
    load3dModelContainer () {
      Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIxYmViODU4Yy0yNzJhLTQ0ZDYtOTU0Ny1jMjE3MTI3NmI0ZGYiLCJpZCI6MTM3NTEsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NjM5NjE5OTJ9.V6yYNDSkghpbRVIc4s6Ipms2Yaa9LZgLo9IlHHkQhyg'
      let options = {
        globe: false, // 是否显示地球
        animation: false, // 是否显示动画控件
        baseLayerPicker: false,
        fullscreenButton: false,
        geocoder: false,
        homeButton: false,
        infoBox: false,
        sceneModePicker: false,
        selectionIndicator: false,
        timeline: false,
        navigationHelpButton: false,
        orderIndependentTranslucency: false,
        contextOptions: {
          webgl: {
            alpha: true
          }
        },
        scene3DOnly: true // 如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
      }
      let viewer = new Cesium.Viewer('3dContainer', options)
      let scene = viewer.scene
      scene.skyBox.show = false
      scene.backgroundColor = new Cesium.Color(0.0, 0.0, 0.0, 0.0)// 设置场景背景色
      scene.renderError.addEventListener(function () {
        scene.primitives.removeAll()
        viewer.useDefaultRenderLoop = true
      })
      this.loadModelBlob('http://192.168.1.32:8580/model/xzs3_1.gltf', viewer)
    },
    // 加载3d模型
    loadModelBlob (gltfUrl, viewer) {
      let scene = viewer.scene
      scene.primitives.removeAll()
      let origin = Cesium.Cartesian3.fromDegrees(0, 0, 10000)
      let modelMatrix = Cesium.Transforms.headingPitchRollToFixedFrame(origin, new Cesium.HeadingPitchRoll())
      let model = scene.primitives.add(Cesium.Model.fromGltf({
        url: gltfUrl,
        modelMatrix: modelMatrix,
        minimumPixelSize: 128
      }))
      model.readyPromise.then(function (model) {
        model.activeAnimations.addAll({
          speedup: 0.5,
          loop: Cesium.ModelAnimationLoop.REPEAT
        })
        let camera = viewer.camera
        let heading = Cesium.Math.toRadians(230.0)
        let pitch = Cesium.Math.toRadians(-20.0)
        let range = 2.0 * Math.max(model.boundingSphere.radius, camera.frustum.near)
        let controller = scene.screenSpaceCameraController
        controller.minimumZoomDistance = range * 0.5
        controller.maximumZoomDistance = range * 2
        let boundingSphere = Cesium.BoundingSphere.transform(model.boundingSphere, model.modelMatrix, new Cesium.BoundingSphere())
        camera.viewBoundingSphere(boundingSphere, new Cesium.HeadingPitchRange(heading, pitch, range))
      }).otherwise(function (error) {
        window.alert(error)
      })
      return model.readyPromise
    },

    loadMapLayerSource () {
      geographicApi.findMapLayerSource({}).then((res) => {
        if (res.data.messageCode === '200') {
          this.layerSelect = true
          this.visibleLayerIds = []
          this.mapLayerSource = res.data.result
          this.loadVisibleLayerIds(this.mapLayerSource)
        }
      })
    },
    load3DByLayer (layerData) {
      // 加载图层及要素
      if (layerData.proType === 'model') {
        let parentEntity = this.geoViewer.entities.add(new Cesium.Entity({id: layerData.id}))
        geographicApi.findFeatureByLayer(layerData).then((res) => {
          if (res.data.messageCode === '200') {
            let featureList = res.data.result
            for (let i = 0; i < featureList.length; i++) {
              this.add3DModel(featureList[i], parentEntity)
            }
          }
        })
      } else if (layerData.proType === 'tiles') {
        this.add3dTiles(layerData)
      }
    },
    loadVisibleLayerIds (mapLayerSource) {
      for (let i = 0; i < mapLayerSource.length; i++) {
        let mapSource = mapLayerSource[i]
        if (mapSource.children && mapSource.children.length > 0) {
          this.loadVisibleLayerIds(mapSource.children)
        }
        if (mapSource.layerVo) {
          if (mapSource.layerVo.visible) {
            this.visibleLayerIds.push(mapSource.id)
            this.load3DByLayer(mapSource.layerVo)
          }
        }
      }
    },
    treeLoadMapLayer (data, checked, sonChecked) {
      if (data.type === 'layer') {
        let layer = data.layerVo
        let mapObj = null
        // 加载图层及要素
        if (layer.proType === 'model') {
          mapObj = this.geoViewer.entities.getById(layer.id)
        } else if (layer.proType === 'tiles') {
          let primitives = this.geoViewer.scene.primitives._primitives
          primitives.map((val) => {
            if (val.id === layer.id) {
              mapObj = val
            }
          })
        }
        if (checked) {
          if (mapObj) {
            mapObj.show = true
          } else {
            this.load3DByLayer(layer)
          }
        } else {
          // 图层隐藏
          if (mapObj) mapObj.show = false
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
    .map{
        height: calc(100vh - 110px);
    }
    .layerBtn{
        width: 30px;
        height: 100px;
        background-color: rgba(38, 38, 38, 0.75);
        border: 1px solid #444;
        /*background-color: rgba(88, 190, 186, 0.6);*/
        cursor: pointer;
        border-right: 1px solid rgba(250, 250, 250, 0.3);
    }
    .layertree{
        width: 250px;
        height: 300px;
        background-color: rgba(38, 38, 38, 0.75);
        border: 1px solid #444;
        /*background-color: rgba(88, 190, 186, 0.6);*/
        transition: width .5s;
        margin-right: 5px;
    }
    .dialog_3dWrap{
        display: flex;
        width: 100%;
        .left_3d{
            width: 45%;
            height: 540px;
            background-color: #dadae2;
        }
        .right_info{
            /*background-color: palevioletred;*/
            width: 55%;
            padding: 10px;
            .seeDialogTitle{
                text-align: center;
                font-size: 22px;
                margin-bottom: 5px
            }
            ul{
                box-sizing: border-box;
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                border-left: 1px solid #ffffff;
                border-top: 1px solid #ffffff;
            }
            .tableItem{
                display: flex;
                width: 50%;
                height: 50px;
                font-size: 16px;
                line-height: 50px;
                box-sizing: border-box;
            }
            .w100{
                text-align: center;
                width: 100%;
            }
            .itemList{
                width: 50%;
                white-space:nowrap;
                overflow:hidden;
                text-overflow:ellipsis;
                box-sizing: border-box;
                border-bottom: 1px solid #ffffff;
                border-right: 1px solid #ffffff;
                text-indent: 10px;
            }
        }
    }
    .dialogWap /deep/ .el-dialog{
        width: 70%;
    }
    .dialogWap /deep/ .el-dialog .el-dialog__body{
        height: 520px;
    }
    .dialogWap /deep/ .el-tabs__item.is-active{
        color: #0FF !important;
    }
    .dialogWap /deep/ .el-tabs__item {
        padding: 0 20px;
        height: 40px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        line-height: 40px;
        display: inline-block;
        list-style: none;
        font-size: 17px;
        font-weight: 500;
        color: #FFF;
        position: relative;
        /* height: 50px; */
        /* line-height: 50px; */
    }
</style>
